<template xmlns:v-lazy="http://www.w3.org/1999/xhtml">
  <div class="web-resume">

    <!--内容-->
    <div class="home me-cell">
      <div class="container-center">
        <el-row>
          <el-col
            :span="7"
            class="text-center">
            <div
              :style="bgImage(meData.pcMeHomeIconUrl)"
              class="home-icon w-round w-image-fit"/>
          </el-col>
          <el-col
            :span="15"
            class="">
            <h1 class="home-title">{{ meData.home_title }}</h1>
            <a
              :href="meData.home_jianli"
              class="home-jianli">简历</a>
          </el-col>
        </el-row>
      </div>
    </div>

    <!--关于我-->
    <div class="about-me me-cell">
      <el-row class="container-center">
        <el-col
          :span="12"
          class="">
          <p class="me-item-title">关于我</p>
          <p
            v-for="(v, k) in meData.aboutArr"
            :key="k"
            class="me-item-detail">{{ v }}</p>
        </el-col>
        <el-col
          :span="12"
          class="zuopin">
          <p class="me-item-title w-text-center">作品</p>
          <el-row class="">
            <el-col
              v-for="(v, k) in productionps"
              :key="k"
              :span="8"
              class="item">
              <div
                v-lazy:background-image="v.pcMeCover || defaultImage"
                class="zuopin-item w-hover-float-shadow"
                @click="productionpItemClick(v)"/>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <!--专业技能-->
    <div class="expertise me-cell container-center">
      <el-row class="">
        <el-col
          :span="10"
          class="">
          <p class="me-item-title">专业技能</p>
          <p
            v-for="(v, k) in meData.expertiseArr"
            :key="k"
            class="me-item-detail">{{ v }}</p>
        </el-col>
        <el-col
          :span="14"
          class="">
          <!--图表-->
          <skills-chart ref="skills-chart"/>
        </el-col>
      </el-row>
    </div>

    <!--工作经验-->
    <div class="experience me-cell show-cell">
      <el-row>
        <el-col
          :span="8"
          class="">
          <p class="me-item-title">工作经验</p>
          <p
            v-for="(v, k) in meData.experience_showArr"
            :key="k"
            class="me-item-detail">{{ v }}</p>
        </el-col>
        <el-col
          :span="16"
          class="right-row">
          <el-row :gutter="20">
            <el-col
              v-for="(study, index) in studyArr"
              :key="index"
              :span="8"
              class="item">
              <figure
                class="alephent-card w-pointer w-image-fit"
                @click="studyCellClick(study)"
                v-lazy:background-image="study.pcMePic || defaultImage">
                <figcaption>
                  <h3>{{ study.title }}</h3>
                  <p>{{ study.describe }}</p>
                </figcaption>
              </figure>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <!--公司-->
    <div class="works me-cell show-cell">
      <el-row>
        <el-col
          :span="8"
          class="">
          <p class="me-item-title">工作经历</p>
          <p
            v-for="(v, k) in meData.works_showArr"
            :key="k"
            class="me-item-detail">{{ v }}</p>
        </el-col>
        <el-col
          :span="16"
          class="right-row">
          <el-row>
            <el-col
              v-for="(work, index) in meData.works"
              :key="index"
              :span="8"
              class="item">
              <a
                :href="work.url"
                target="_blank">
                <div
                  v-lazy:background-image="work.pcMeIcon || defaultImage"
                  class="icon w-hover-float-shadow">
                  <p class="work-name">{{ work.name }}</p>
                  <el-popover
                    width="250"
                    trigger="hover"
                    placement="top">
                    <p>时间：{{ work.timeIntervalStr }}</p>
                    <p>职责：{{ work.obligation }}</p>
                    <p>说明：{{ work.detail }}</p>
                    <div
                      slot="reference"
                      class="name-wrapper works-icon-info">
                      <span class="el-icon-warning"/>
                    </div>
                  </el-popover>
                </div>
              </a>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <!--联系我-->
    <div class="contact me-cell container-center">
      <p class="me-item-title w-text-center">意见反馈</p>
      <el-form
        :model="feedbackForm"
        class="demo-form-inline">
        <el-row>
          <el-col :span="12">
            <el-form-item
              :rules="[
                { required: true, message: '姓名/昵称不能为空'}
              ]"
              label="姓名/昵称"
              label-width="90px"
              prop="name">
              <el-input
                v-model="feedbackForm.name"
                placeholder="请输入姓名"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="Phone"
              label-width="90px">
              <el-input
                v-model="feedbackForm.phone"
                placeholder="请输入手机号(不会泄露)"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="QQ"
              label-width="90px">
              <el-input
                v-model="feedbackForm.qq"
                placeholder="请输入QQ(不会泄露)"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="微信"
              label-width="90px">
              <el-input
                v-model="feedbackForm.wx"
                placeholder="请输入微信(不会泄露)"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          :rules="[{ required: true, message: '意见/建议意见不能为空'}]"
          label="意见/建议"
          label-width="90px"
          prop="content">
          <el-input
            v-model="feedbackForm.content"
            type="textarea"/>
        </el-form-item>
        <el-form-item
          label="是否显示到意见列表"
          label-width="150px">
          <el-switch v-model="feedbackForm.isShow"/>
        </el-form-item>
        <el-form-item class="w-text-center">
          <el-button
            :loading="btnIsSubmit"
            :disabled="!feedbackForm.content || !feedbackForm.name"
            type="danger"
            @click="onSubmit">提交建议
          </el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
  import MeModel from '@/models/web/MeModel'
  import StudyModel from '@/models/web/StudyModel'
  import ProductModel from '@/models/web/ProductModel'
  import FeedBackModel from '@/models/web/FeedBackModel'
  import {mapGetters} from 'vuex'
  import SkillsChart from './skillsChart'
  import API from '@/api/apis'
  export default {
    name: 'WebResume',
    components: {
      SkillsChart
    },
    inject: ['bgImage'],
    data() {
      return {
        /**
         * 我的数据
         */
        meData: new MeModel(),
        /**
         * 反馈模型
         */
        feedbackForm: new FeedBackModel (),
        /**
         * 按钮是否正在提交
         */
        btnIsSubmit: false,
        /**
         * 学习数组
         */
        studyArr: [],
        /**
         * 作品数组
         */
        productionps: []
      }
    },
    computed: {
      ...mapGetters (['defaultImage'])
    },
    mounted() {
      this.getMeData ()
      this.getStudyData ()
      this.getProduction ()
    },
    methods: {
      /**
       * 获取所有的数据
       */
      getMeData() {
        this.meData.getModel ().w_then((data) => {
          this.$refs['skills-chart'].setDara (data)
        })
      },
      /**
       * 获取最新三个的学习数据
       */
      getStudyData() {
        StudyModel.loadAllModels(API.study.meData).w_then((dataArr) => {
          this.studyArr = dataArr
        })
      },
      /**
       * 获取需要显示的作品
       */
      getProduction() {
        ProductModel.loadAllModels(API.production.meData).w_then((dataArr) => {
          this.productionps = dataArr
        })
      },
      /**
       * 作品cell点击
       * @param item
       */
      productionpItemClick(item) {
        window.open (`#/web/works/detail?id=${item._id}`)
      },
      /**
       * 学习cell点击
       * @param item
       */
      studyCellClick(item) {
        window.open (`#/web/conclusion/detail?id=${item._id}`)
      },
      /**
       * 提交数据
       */
      onSubmit() {
        this.btnIsSubmit = true
        this.feedbackForm.addOrUpdate().then (() => {
          this.feedbackForm = new FeedBackModel ()
        }).catch (() => {
        }).finally(() => {
          this.btnIsSubmit = false
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

  .web-resume {

    /*全局*/
    >.me-cell {
      border-bottom: 1px solid rgb(230, 230, 230);
      padding: 50px 10px;
      box-sizing: border-box;
    }

    .me-item-title {
      font-style: normal;
      font-weight: 200;
      letter-spacing: 0px;
      font-size: 30px;
    }

    .me-item-subtitle {
      font-style: normal;
      font-weight: 200;
      margin: 15px 0 0 10px;
      letter-spacing: 0px;
      font-size: 16px;
      color: #878787;
    }

    .me-item-detail {
      font-style: normal;
      font-weight: 200;
      letter-spacing: 0px;
      font-size: 20px;
      color: #878787;
    }

    /*顶部个人信息*/
    /*home*/
    > .home {
      padding: 120px 0;

      .home-icon {
        width: 150px;
        height: 150px;
      }

      .home-title {
        color: #878787;
        font-size: 40px;
        font-weight: 300;
        letter-spacing: 0.2px;
      }

      .home-jianli {
        font-size: 20px;
        color: darkgrey;
      }

      .home-jianli:hover {
        color: #333;
      }
    }

    /*about me*/
    .about-me {

    }

    .zuopin {
      list-style: none;

      .zuopin-item {
        width: 130px;
        border-radius: 50%;
        height: 130px;
        margin: 0 auto;
        background-size: cover;
        background-position: center;
        cursor: pointer;
      }

      .item:nth-child(n + 4) {
        margin-top: 30px;
      }
    }

    /*works*/
    .works {
      .right-row {
        .icon:hover::after {
          content: " ";
          width: 100%;
          height: 100%;
          border-radius: 20px;
          position: absolute;
          background-color: rgba(3, 3, 3, .7);
          transition: all .6s;
        }

        .icon:hover .work-name {
          text-shadow: 0 0 1px #fff;
          color: #fff;
          bottom: 67px;
          transition: all .6s;
        }

        .work-name {
          position: absolute;
          width: 100%;
          bottom: 0px;
          font-size: 18px;
          color: rgba(0,0,0,0);
          padding: 0 30px;
          text-align: center;
          box-sizing: border-box;
          transition: all 1s;
          z-index: 1000;
        }
      }
    }

    /*工作经验*/
    .experience {

      .alephent-card {
        width: 100%;
        height: 200px;
        color: #ffffff;
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 16px;
        margin: 0px;
        overflow: hidden;
        position: relative;
        text-align: left;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
      }

      .alephent-card *,
      .alephent-card *:before,
      .alephent-card *:after {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.45s ease;
        transition: all 0.45s ease;
      }

      .alephent-card:before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        content: '';
        background-color: #090d77;
        opacity: 0.5;
        -webkit-transition: all 0.45s ease;
        transition: all 0.45s ease;
      }

      .alephent-card:after {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        content: '';
        background-color: #031f46;
        opacity: 0.5;
        -webkit-transition: all 0.45s ease;
        transition: all 0.45s ease;
      }

      .alephent-card:before {
        -webkit-transform: skew(30deg) translateX(-80%);
        transform: skew(30deg) translateX(-80%);
      }

      .alephent-card:after {
        -webkit-transform: skew(-30deg) translateX(-70%);
        transform: skew(-30deg) translateX(-70%);
      }

      .alephent-card figcaption {
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        z-index: 1;
        padding: 20px;
      }

      .alephent-card figcaption:before,
      .alephent-card figcaption:after {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #b81212;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
        content: '';
        opacity: 0.5;
        z-index: -1;
      }

      .alephent-card figcaption:before {
        -webkit-transform: skew(30deg) translateX(-100%);
        transform: skew(30deg) translateX(-100%);
      }

      .alephent-card figcaption:after {
        -webkit-transform: skew(-30deg) translateX(-90%);
        transform: skew(-30deg) translateX(-90%);
      }

      .alephent-card h3,
      .alephent-card p {
        margin: 0;
        opacity: 0;
        letter-spacing: 1px;
      }

      .alephent-card h3 {
        font-size: 20px;
        font-weight: 700;
        line-height: 26px;
        text-transform: uppercase;
      }

      .alephent-card p {
        font-size: 14px;
        line-height: 20px;
        margin-top: 8px;
      }

      .alephent-card a {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
      }

      .alephent-card:hover h3,
      .alephent-card.hover h3,
      .alephent-card:hover p,
      .alephent-card.hover p {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0.9;
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
      }

      .alephent-card:hover:before,
      .alephent-card.hover:before {
        -webkit-transform: skew(30deg) translateX(-20%);
        transform: skew(30deg) translateX(-20%);
        -webkit-transition-delay: 0.05s;
        transition-delay: 0.05s;
      }

      .alephent-card:hover:after,
      .alephent-card.hover:after {
        -webkit-transform: skew(-30deg) translateX(-10%);
        transform: skew(-30deg) translateX(-10%);
      }

      .alephent-card:hover figcaption:before,
      .alephent-card.hover figcaption:before {
        -webkit-transform: skew(30deg) translateX(-40%);
        transform: skew(30deg) translateX(-40%);
        -webkit-transition-delay: 0.15s;
        transition-delay: 0.15s;
      }

      .alephent-card:hover figcaption:after,
      .alephent-card.hover figcaption:after {
        -webkit-transform: skew(-30deg) translateX(-30%);
        transform: skew(-30deg) translateX(-30%);
        -webkit-transition-delay: 0.1s;
        transition-delay: 0.1s;
      }
    }

    .show-cell {

      .icon {
        width: 200px;
        height: 200px;
        border-radius: 20px;
        position: relative;
        cursor: pointer;
        background-position: center;
        background-size: cover;
        margin: 0 auto;
      }

      .item:nth-child(n + 4) {
        margin-top: 50px;
      }

      .works-icon-info {
        position: absolute;
        top: 10px;
        right: 13px;
        font-size: 20px;
        color: #fff;
        z-index: 1000;
      }
    }

  }

</style>

